<template>
  <div class="root">
    <div class="list" v-for="(value, key) in doneGroupList" :key="key">
      <div class="group">{{ getDateStr(key) }}</div>
      <div class="item" v-for="(done, index) in value" :key="done.id">
        <p>{{ index + 1 }}.{{ done.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
import DB from '@/utils/db'
import { getDateStr, getNowDate, getNowDateTime } from '@/utils/common'
export default {
  name: 'Done',
  data() {
    return {
      doneGroupList: {}
    }
  },
  created() {
    ipcRenderer.invoke('getDataPath').then((storePath) => {
      DB.initDB(storePath)
    })
    this.getDoneList()
  },
  methods: {
    getDateStr,
    getDoneList() {
      const doneList = DB.groupby('doneList', 'doneDate')
      if (Object.keys(doneList).length === 0) {
        this.doneGroupList = {}
        this.doneGroupList[getNowDate()] = [
          {
            content: 'Happy every day !',
            doneDate: getNowDate(),
            doneDateTime: getNowDateTime(),
            id: '6c532915-aaaa-aaaa-aaaa-742fcc1cc2e2',
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime()
          },
          {
            content: 'Happy everyone !',
            doneDate: getNowDate(),
            doneDateTime: getNowDateTime(),
            id: '6c532915-bbbb-bbbb-bbbb-742fcc1cc2e2',
            todoDate: getNowDate(),
            todoDateTime: getNowDateTime()
          }
        ]
        return
      }
      this.doneGroupList = doneList
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  box-sizing: border-box;
  padding-bottom: 20px;
  .list {
    .group {
      position: sticky;
      top: 0;
      z-index: -999;
      height: 224px;
      line-height: 180px;
      box-sizing: border-box;
      color: rgba($color: #ccc, $alpha: 0.8);
      font-size: 40px;
      text-align: center;
      user-select: none;
    }
    .item {
      display: flex;
      align-items: center;
      height: 28px;
      &:hover {
        p {
          color: rgba($color: #fff, $alpha: 0.6);
        }
      }
      p {
        width: 100%;
        height: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 28px;
      }
    }
  }
}
</style>
